<template>
  <div class="index">
    <el-container>
      <el-aside width="250px">导航</el-aside>
      <el-container>
        <el-header>头部</el-header>
        <el-main>内容</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
      .index{
        margin: 0;padding: 0;
        .el-header{
          background-color: #B3C0D1;
          color: #333;
          text-align: center;
          line-height: 60px;
        }

        .el-aside {
          background-color: #D3DCE6;
          color: #333;
          text-align: center;
          line-height: 200px;
        }

        .el-main {
          background-color: #E9EEF3;
          color: #333;
          text-align: center;
          line-height: 160px;
        }

        body > .el-container {
          margin-bottom: 40px;
        }

      }
</style>
